<template>
	<DialogBox v-model:visible="drawerVisible" title="选择通知用户" width="900px" @close="close">
		<ProTable
			ref="proTable"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			custSearch
			:showHeader="false"
			isClearSelection
			:selectDefault="props.selectDefault"
		>
			<template #status="scope">
				<el-tag v-if="scope.row.status == '0'" type="danger">停用</el-tag>
				<el-tag v-else-if="scope.row.status == '1'" type="success">启用</el-tag>
			</template>
		</ProTable>
		<template #footer>
			<el-button @click="close()">取消</el-button>
			<el-button type="primary" @click="validData">确定</el-button>
		</template>
	</DialogBox>
</template>

<script setup lang="tsx" name="userSelectDialog">
import DialogBox from "@/components/DialogBox";
import { reactive, ref } from "vue";
import { getUserList } from "@/api/modules/user";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";

// const router = useRouter();

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});

const props = defineProps({
	visible: {
		type: Boolean,
		default() {
			return false;
		}
	},
	selectDefault: {
		type: Array,
		default: () => []
	}
});
const drawerVisible = ref(props.visible);
watch(
	() => props.visible,
	() => {
		drawerVisible.value = props.visible;
	}
);
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageIndex && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		datalist: data.records,
		total: data.total,
		pageIndex: data.current,
		pageSize: data.size
	};
};
const emit = defineEmits(["submit", "update:visible"]);
// drawer框状态
const validData = () => {
	emit("submit", proTable.value.selectedList);
	close();
};
const close = () => {
	emit("update:visible", false);
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	return getUserList({ ...params, self: 1 });
};
// 表格配置项
const columns: ColumnProps[] = [
	{ type: "selection", fixed: "left", width: "auto" },
	{
		prop: "username",
		label: "用户名",
		search: { el: "input" }
	},
	{ prop: "email", label: "邮箱" },
	{
		prop: "mobile",
		label: "手机号"
	},
	{ prop: "roleName", label: "角色" }
];
</script>

<style lang="scss"></style>
